<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="app">
    <h1>会话大模型前端界面</h1>
    <MessageList :messages="messages" />
    <MessageInput @send-message="handleSendMessage" />
  </div>
</template>

<script>
import MessageList from '@/components/MessageList.vue';
import MessageInput from '@/components/MessageInput.vue';
import axios from 'axios';

export default {
  components: {
    MessageList,
    MessageInput
  },
  data() {
    return {
      messages: []
    };
  },
  methods: {
    async handleSendMessage(message) {
      // 添加用户消息到消息列表
      this.messages.push({ sender: 'user', content: message });
      try {
        // 发送请求到后端获取大模型的回复
        const response = await axios.post('YOUR_API_ENDPOINT', { message });
        const botResponse = response.data.message;
        // 添加机器人回复到消息列表
        this.messages.push({ sender: 'bot', content: botResponse });
      } catch (error) {
        console.error('请求出错:', error);
        this.messages.push({ sender: 'bot', content: '请求出错:'});
      }
    }
    
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>